<!--
 * @FilePath: ConfigDialog.vue
 * @@author: wjj
 * @Date: 2025-07-11 15:03:06
 * @@Description: new js file
-->
<template>
  <el-dialog
    v-model="visible"
    :title="`配置${step.typeMap[step.step.type].label}`"
    width="600px"
    destroy-on-close
  >
    <el-form label-position="top">
      <el-form-item label="操作说明" required>
        <el-input v-model="step.name" />
      </el-form-item>

      <!-- 浏览器操作配置 -->
      <template v-if="step.step.type === 'browser'">
        <el-form-item label="浏览器类型" required>
          <el-select v-model="step.params.browser">
            <el-option label="Chrome" value="chrome" />
            <el-option label="Firefox" value="firefox" />
            <el-option label="Edge" value="edge" />
            <el-option label="Safari" value="safari" />
          </el-select>
        </el-form-item>
      </template>

      <!-- URL访问配置 -->
      <template v-if="step.step.type === 'navigate'">
        <el-form-item label="URL" required>
          <el-input v-model="step.params.url" placeholder="请输入完整URL" />
        </el-form-item>
      </template>

      <!-- 输入内容配置 -->
      <template v-if="step.step.type === 'input'">
        <el-form-item label="元素定位表达式" required>
          <el-input
            v-model="step.params.selector"
            placeholder="CSS选择器或XPath"
          />
        </el-form-item>

        <el-form-item label="值">
          <el-input
            v-model="step.params.value"
            placeholder="请输入要输入的内容"
          />
        </el-form-item>
      </template>

      <!-- 点击元素配置 -->
      <template v-if="step.step.type === 'click'">
        <el-form-item label="元素定位表达式" required>
          <el-input
            v-model="step.params.selector"
            placeholder="CSS选择器或XPath"
          />
        </el-form-item>
      </template>

      <!-- 强制等待配置 -->
      <template v-if="step.step.type === 'wait'">
        <el-form-item label="等待时间(毫秒)" required>
          <el-input-number
            v-model="step.params.duration"
            :min="100"
            :max="60000"
            :step="500"
          />
        </el-form-item>
      </template>

      <!-- 通用超时设置 -->
      <el-form-item
        v-if="['input', 'click', 'checkbox', 'select'].includes(step.step.type)"
        label="超时时间(毫秒)"
      >
        <el-input-number
          v-model="step.params.timeout"
          :min="1000"
          :max="30000"
          :step="1000"
        />
      </el-form-item>
    </el-form>

    <template #footer>
      <el-button @click="handleCancel">取消</el-button>
      <el-button type="primary" @click="handleConfirm">保存</el-button>
    </template>
  </el-dialog>
</template>

<script lang='ts' setup name='filename'>
import { ref, reactive, onMounted, watch, nextTick } from 'vue'
//引入用户相关的小仓库
import useUserStore from '@/store/modules/user'
import useSocketClient from '@/store/socket/socket_client'
import emmit from '@/utils/emitter'
import { useRoute, useRouter } from 'vue-router'
import { ElNotification, ElMessage, ElMessageBox } from 'element-plus'
import request from '@/utils/request'
// 挂载完毕
//onMounted(()=>{})
//监控数据
//watch(select, (newVal, oldVal) => {})
const props = defineProps({
  visible: {
    type: Boolean,
    default: false,
  },
  step: {
    type: Object,
    required: true,
  },
})

const emit = defineEmits(['update:visible', 'confirm'])

const visible = ref(props.visible)
const step = reactive({
  ...JSON.parse(JSON.stringify(props.step)),
  typeMap: {
    browser: { label: '启动浏览器' },
    navigate: { label: '访问网站URL' },
    input: { label: '输入内容' },
    click: { label: '点击元素' },
    wait: { label: '强制等待' },
    // 其他类型...
  },
})

watch(
  () => props.visible,
  (val) => {
    visible.value = val
  },
)

watch(
  () => props.step,
  (newStep) => {
    Object.assign(step, JSON.parse(JSON.stringify(newStep)))
  },
)

const handleCancel = () => {
  visible.value = false
  emit('update:visible', false)
}

const handleConfirm = () => {
  visible.value = false
  emit('update:visible', false)
  emit('confirm', step)
}
</script>
<style scope lang='scss'>
</style>